<template>
  <div class="viewColor">
    <div class="absolute" id="absoluteHeader">
      <div class="header">
        <img src="@/assets/images/return.png" @click="goBackPhone" class="header_img"/>
        <div class="title">个人简历</div>
        <div class="preview" @click="goProgrammerDetail">预览</div>
      </div>
    </div>
    <div class="swiper-container" id="list">
      <div class="swiper-wrapper">
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">基本信息</div>
              <img src="@/assets/images/edit.png" class="base_img" @click="goInformation"/>
            </div>
            <div class="base_body">
              <div class="base_title">头像:</div>
              <img v-if="image" class="img_avatar" :src="'api' + image">
            </div>
            <div class="base_body">
              <div class="base_title">昵称:</div>
              <div class="base_value">{{nickName}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">性别:</div>
              <div class="base_value">{{sex}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">年龄:</div>
              <div class="base_value">{{age}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">工作经验:</div>
              <div class="base_value">{{workLength ? workLength + '年': ''}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">地区:</div>
              <div class="base_value">{{city}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">公司:</div>
              <div class="base_value">{{company}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">职位:</div>
              <div class="base_value">{{position}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">职业方向:</div>
              <div class="base_value">{{directionName}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">目前状态:</div>
              <div class="base_value">{{status}}</div>
            </div>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">工作说明</div>
              <img src="@/assets/images/edit.png" class="base_img" @click="goWorkExplain"/>
            </div>
            <div class="base_body">
              <div class="base_title">人天单价:</div>
              <div class="base_value">{{price ? price + "/天":""}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">可工作时间:</div>
              <div class="base_value">{{workTime}}</div>
            </div>
            <div class="base_body">
              <div class="base_title">可工作地点:</div>
              <div class="base_value">{{workAddress}}</div>
            </div>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">个人介绍</div>
              <img src="@/assets/images/edit.png" class="base_img" @click="goIntroduction"/>
            </div>
            <div class="introduction" v-show="!introduction">
              请从个人基本情况、技术栈、可提供服务等方面进行介绍，字数不少于150字
            </div>
            <div class="p_intro" v-show="introduction" v-html="introduction"></div>
          </div>
        </div><div class="swiper-slide list-slide">
        <div class="backColor">
          <div class="baseMessage">
            <div class="base_header">工作经历</div>
            <img src="@/assets/images/add.png" class="base_img" @click="goWorkExperiment"/>
          </div>
          <div class="introduction" v-show="workExperiment.length === 0">
            请添加工作经历
          </div>
          <div class="introduction" v-show="workExperiment.length > 0">
            <div class="workBetween" v-for="(workExper, index) in workExperiment" @click="goWorkExperimentView(index)"
                 :key="index">
              <div class="align_between">
                <div class="degree">{{workExper.company}}</div>
                <div class="degree_right"></div>
              </div>
              <div class="align_between">
                <div class="degree">{{workExper.position}}</div>
                <div class="major_right">{{workExper.startTime+'-'+workExper.endTime}}</div>
              </div>
              <div class="degree_text" v-html="workExper.experienceDesc"></div>
            </div>
          </div>
        </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">教育经历</div>
              <img src="@/assets/images/add.png" class="base_img" @click="goEducation"/>
            </div>
            <div class="introduction" v-show="educationExperiment.length === 0">
              请添加教育经历
            </div>
            <div class="introduction" v-show="educationExperiment.length > 0" v-for="(eduExper, index) in educationExperiment"
                 :key="index" @click="goEducationView(index)">
              <div class="align_between">
                <div class="degree">{{eduExper.school}}</div>
                <div class="degree_right"></div>
              </div>
              <div class="align_between">
                <div class="degree">{{eduExper.specialty}}</div>
                <div class="major_right">{{eduExper.startTime+'-'+eduExper.endTime}}</div>
              </div>
              <div class="degree_text" v-html="eduExper.experienceDesc"></div>
            </div>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">技能评价</div>
              <img src="@/assets/images/add.png" class="base_img" @click="goTechnology"/>
            </div>
            <div class="introduction" v-if="skillList.length === 0">
              请至少添加一项技能
            </div>
            <div class="introduction" v-if="skillList.length > 0">
              <div class="box_skill">
                <div v-for="(skill, index) in skillList" class="skill_box" :key="index">
                  <div class="tech_base" >
                    <div class="tech_title">{{skill.skillName}}</div>
                    <div class="tech_flex" v-if="skill.skillLevel===10">
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                    </div>
                    <div class="tech_flex" v-if="skill.skillLevel===8">
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                    </div>
                    <div class="tech_flex" v-if="skill.skillLevel===6">
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                    </div>
                    <div class="tech_flex" v-if="skill.skillLevel===4">
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                    </div>
                    <div class="tech_flex" v-if="skill.skillLevel===2">
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                      <div class="tech_level"></div>
                    </div>
                  </div>
                  <div class="skill_delete" @click="deleteSkill(index,skill.id)">删除</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">项目作品</div>
              <img src="@/assets/images/add.png" class="base_img" @click="goProduction"/>
            </div>
            <div class="introduction" v-if="projectList.length === 0">
              申请签约至少需要添加三个不同的具有代表性的个人项目
            </div>
            <div class="production" v-for="(project, index) in projectList">
              <img class="production_img" src="@/assets/images/avatar.png"/>
              <div class="production_message">
                <div class="production_header">
                  <div class="production_title">{{project.projectName}}</div>
                  <div class="production_right"></div>
                </div>
                <div class="production_text">{{project.infoDesc}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">社区影响力</div>
              <img src="@/assets/images/edit.png" class="base_img" @click="goCommunity"/>
            </div>
            <div class="introduction">
              开发工程师必须绑定github以审查代码
            </div>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="backColor">
            <div class="baseMessage">
              <div class="base_header">实名信息</div>
              <img src="@/assets/images/edit.png" class="base_img"/>
            </div>
            <div class="introduction">
              必填项，实名认证信息仅用于签约审核用途
            </div>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="btn" @click="goSigning">
            <div class="btn-text">申请签约开发者</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  var listSwiper;
  var swiperInitHeight = $('#absoluteHeader').height()
  function initSwiper(){
    var ResumeTranslate=0;
    if(sessionStorage.getItem("ResumeTranslate")){
      ResumeTranslate=sessionStorage.getItem("ResumeTranslate");
    }
    listSwiper = new Swiper('#list', {
      direction: 'vertical',
      slidesPerView: 'auto',
      freeMode: true
    })
    listSwiper.setTranslate(ResumeTranslate)
  }
  export default {
    name: "Resume",
    data() {
      return {}
    },
    created(){
      let userId = this.$route.params.id;
      this.$store.commit('setUserID',userId)
    },
    mounted() {
      if (!this.$store.state.hasMounted) {
        this.$store.dispatch('action_getPInformation').then()
        this.$store.commit('setHasMounted')
      }
      initSwiper()
      var delWidth = $('.skill_delete').width();
      $('.skill_box').touchWipe(delWidth);
    },
    updated(){
      listSwiper.update();
      var delWidth = $('.skill_delete').width();
      $('.skill_box').touchWipe(delWidth);
    },
    computed: {
      userID(){
        return this.$store.state.baseInfoMessage.userID
      },
      projectList() {
        return this.$store.state.projectList
      },
      skillList() {
        return this.$store.state.skillList
      },
      image() {
        return this.$store.state.baseInfoMessage.image
      },
      nickName() {
        return this.$store.state.baseInfoMessage.nickName
      },
      age() {
        return this.$store.state.baseInfoMessage.age
      },
      sex() {
        return this.$store.getters.getSex
      },
      workLength() {
        return this.$store.state.baseInfoMessage.workLength
      },
      city() {
        return this.$store.state.baseInfoMessage.city
      },
      company() {
        return this.$store.state.baseInfoMessage.company
      },
      position() {
        return this.$store.state.baseInfoMessage.position
      },
      directionName() {
        return this.$store.state.baseInfoMessage.directionName
      },
      status() {
        return this.$store.getters.getStatus
      },
      price() {
        return this.$store.state.workExplain.price
      },
      workTime() {
        return this.$store.state.workExplain.workTime
      },
      workAddress() {
        return this.$store.state.workExplain.workAddress
      },
      introduction() {
        return this.$store.state.introduction
      },
      workExperiment() {
        return this.$store.state.workExperiment
      },
      educationExperiment() {
        return this.$store.state.educationExperiment
      },
    },
    methods: {
      deleteSkill(index,id) {
        this.$store.dispatch("action_deleteSkill", {index,id}).then()
      },
      goBackPhone() {
        window.webkit.messageHandlers.resume.postMessage({});
      },
      goProgrammerDetail(){
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push(`/ProgrammerDetail/${this.userID}`)
      },
      goSigning() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push(`/Signing`)
      },
      goInformation() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$store.commit("setPInformation")
        this.$router.push('/Pinformation')
      },
      goWorkExplain() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push('/WorkExplain')
      },
      goWorkExperiment() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push('/WorkExperiment')
      },
      goIntroduction() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push('/Introduction')
      },
      goEducation() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push('/Education')
      },
      goTechnology() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push('/Technology')
      },
      goProduction() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push('/Production')
      },
      goCommunity() {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push('/Community')
      },
      goWorkExperimentView(index) {
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push(`/workExperimentView/${index}`)
      },
      goEducationView(index){
        sessionStorage.setItem("ResumeTranslate",listSwiper.getTranslate());
        this.$router.push(`/EducationView/${index}`)
      },
    }
  }
</script>

<style scoped>
  .list-slide{
    height: auto;
  }
  .swiper-container{
    height: 100%;
  }
  .absolute{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
  }
  .viewColor {
    box-sizing: border-box;
    padding-top: 90px;
    position: relative;
    height: 100%;
    background: rgba(245, 245, 245, 1);
  }
  .box_skill{
    overflow: hidden;
  }
  .skill_box{
    display: flex;
    position: relative;
  }
  .skill_delete{
    line-height: 80px;
    position: absolute;
    top: 0;
    text-align: center;
    height: 80px;
    color: #fff;
    background-color: #8ec43e;
    right: -160px;
    width: 160px;
  }
  .workBetween {
    margin-bottom: 40px;
  }

  .workBetween:last-child {
    margin-bottom: 0px;
  }

  .production {
    display: flex;
    flex-direction: row;
    padding: 0 52px 40px 52px;
  }

  .production_img {
    width: 160px;
    height: 120px;
  }

  .production_message {
    width: 468px;
    box-sizing: border-box;
    padding: 8px 0 8px 18px;
    display: flex;
    flex-direction: column;
  }

  .production_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .production_title {
    font-size: 28px;
    font-weight: 500;
    color: rgba(43, 43, 43, 1);
  }

  .production_right {
    width: 14px;
    height: 24px;
    background: url("~@/assets/images/rightArrow@2x.png") left center no-repeat;
    background-origin: border-box;
    background-size: cover;
  }

  .production_message {
    line-height: 36px;
    font-size: 24px;
    font-weight: 400;
    color: rgba(84, 84, 84, 1);
  }

  .production_text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .img_avatar {
    width: 52px;
    height: 52px;
  }

  .p_intro {
    padding: 0px 38px 52px 52px;
    font-size: 28px;
    font-weight: 400;
    color: rgba(84, 84, 84, 1);
    line-height: 36px;
  }
  .backColor {
    background-color: #ffffff;
    margin-bottom: 25px;
  }

  .header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    width: 17px;
    height: 30px;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }

  .preview {
    font-size: 28px;
    color: #ffffff;
  }

  .baseMessage {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 40px 30px;
    align-items: center;

  }

  .base_header {
    flex: 1;
    font-size: 28px;
    font-weight: bold;
    color: rgb(43, 43, 43);
    box-sizing: border-box;
    border-left: 8px solid #8ec43e;
    padding-left: 15px;
  }

  .base_body {
    display: flex;
    align-items: center;
    padding: 0 30px 27px 52px;
  }

  .base_title {
    flex: 1;
    font-size: 28px;
    color: rgba(153, 153, 153, 1);
    font-weight: 400;
  }

  .base_img {
    border-radius: 4px;
    width: 48px;
    height: 48px;
  }

  .base_value {
    font-size: 28px;
    font-weight: 400;
    color: rgba(84, 84, 84, 1);
  }

  .introduction {
    overflow: hidden;
    padding: 0px 38px 52px 52px;
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    color: rgba(153, 153, 153, 1);
  }

  .btn {
    display: flex;
    bottom: 0;
    height: 90px;
    background: rgba(142, 196, 62, 1);
    justify-content: center;
    align-items: center;
  }

  .btn-text {
    font-size: 30px;
    color: #ffffff;
    flex: 1;
    text-align: center;
  }
  .tech_base{
    flex: 1;
    height: 80px;
  }
  .tech_title {
    margin-bottom: 8px;
    font-size: 32px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .tech_flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .tech_level {
    border-right: 1px solid #ffffff;
    width: 132px;
    height: 11px;
    background: #8ec43e;
  }

  .align_between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .degree {
    font-size: 28px;
    font-weight: 500;
    color: rgba(43, 43, 43, 1);
  }

  .degree_right {
    width: 14px;
    height: 24px;
    background: url("~@/assets/images/rightArrow@2x.png") left center no-repeat;
    background-origin: border-box;
    background-size: cover;
  }

  .major_right {
    font-size: 28px;
    font-weight: 400;
    color: rgba(84, 84, 84, 1);
  }

  .degree_text {
    font-size: 28px;
    font-weight: 400;
    color: rgba(84, 84, 84, 1);
  }
</style>
